<template>
	<!-- 培训资源 -->
	<view class="page-two-list">
		<!-- 广告位 -->
		<view class="advertising">
			<swiper class="ad-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in advertising" :key="index">
					<image :src="item" mode="scaleToFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="page-two-main">
			<!-- 搜索框 -->
			<view class="filter-bar">
				<view class="filter-bar-right" style="margin-left: 0;">
					<input class="filter-input" placeholder="请输入搜索内容" v-model="searchQuery" @confirm="searchConfirm" />
					<image class="search-icon" src="/static/images/search_icon.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 筛选按钮组 -->
			<view class="filter-buttons1">
				<view v-for="(item, index) in pupItemData" :key="index" class="filter-button1"
					:class="{ 'filter-button-active': selectedFilter === item.text }" @click="selectFilter(item.text)">
					{{ item.text }}
				</view>
			</view>
			<view v-if="pxzyData.length > 0" class="content" style="overflow: auto;">
				<pxzy :pxzyData="pxzyData"></pxzy>
			</view>
			<view v-if="pxxxData.length > 0" class="content" style="overflow: auto;">
				<pxxx :pxxxData="pxxxData"></pxxx>
			</view>
			<view v-if="xspxData.length > 0" class="content content-bottom" style="overflow: auto;">
				<xspx :pxxxData="xspxData"></xspx>
			</view>
			<view class="zwxx-img" v-if="pxzyData.length === 0 && pxxxData.length === 0 && xspxData.length === 0">
				<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix">
				</image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Pxzy from '../../components/Pxzy.vue'; // 培训资源
	import Pxxx from '../../components/Pxxx.vue'; // 培训信息
	import Xspx from '../../components/Xspx.vue'; // 线上培训
	export default {
		components: {
			Pxzy,
			Pxxx,
			Xspx
		},
		data() {
			return {
				advertising: [],
				pxzyData: [], // 培训机构
				pxxxData: [], // 培训信息
				xspxData: [], // 线上培训
				searchQuery: '', // 搜索内容
				selectedFilter: '培训机构', // 筛选默认
				pupItemData: [{
					text: '培训机构'
				}, {
					text: '培训信息'
				}, {
					text: '线上培训'
				}],
				originalPxzyData: [], // 保存培训机构原始数据
				originalPxxxData: [], // 保存培训信息原始数据
				originalxxpxData: [], // 保存线上培训原始数据
			}
		},
		onLoad() {
			this.getPxjg() // 培训机构
			this.getBannerList() // 获取广告位
		},
		methods: {
			// 获取广告位
			async getBannerList() {
				const res = await this.$api.getBannerList()
				if (res.succ) {
					// 查找zsggw等于"培训资源"的项
					const targetBanner = res.data.find(item => item.zsggw === '培训资源')
					// 如果找到匹配项，则使用其tpList值，否则保持默认值
					this.advertising = targetBanner ? targetBanner.tpList : ['https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/banner1.png']
				}
			},
			// 获取培训机构
			async getPxjg() {
				let data = {
					fwsfl: '培训机构',
					status: '审核通过'
				}
				try {
					const res = await this.$api.getSwsList(data)
					if (res.succ) {
						// 按照createTime降序排序
						const sortedData = res.data.sort((a, b) => {
							return new Date(b.createTime) - new Date(a.createTime)
						})
						this.originalPxzyData = sortedData
						this.pxzyData = sortedData
						this.pxxxData = [] // 清空培训信息数据
						this.originalPxxxData = [] // 清空培训信息原始数据
						this.originalxxpxData = [] // 清空线上培训原始数据
						this.xspxData = [] // 清空线上培训数据
					}
				} catch (error) {
					console.error('获取培训机构失败:', error)
				}
			},
			// 获取培训信息
			async getPeixunList() {
				try {
					const res = await this.$api.getPeixunList()
					if (res.succ) {
						// 按照createTime降序排序
						const sortedData = res.data.sort((a, b) => {
							return new Date(b.createTime) - new Date(a.createTime)
						})
						this.originalPxxxData = sortedData
						this.pxxxData = sortedData
						this.pxzyData = [] // 清空培训机构数据
						this.originalPxzyData = [] // 清空培训机构原始数据
						this.originalxxpxData = [] // 清空线上培训原始数据
						this.xspxData = [] // 清空线上培训数据
					}
				} catch (error) {
					console.error('获取培训信息失败:', error)
				}
			},
			// 获取线上培训
			async getxspxList() {
				try {
					let data = {
						pageNum: 1,
						pageSize: 10000,
						params: {
							status: '审核通过',
						}
					}
					const res = await this.$api.getTrainList(data);
					if (res.succ) {
						this.originalxxpxData = res.data.list;
						this.xspxData = res.data.list;
						console.log(this.xspxData)
						this.pxzyData = []; // 清空培训机构数据
						this.originalPxzyData = []; // 清空培训机构原始数据
						this.pxxxData = []; // 清空培训信息数据
						this.originalPxxxData = []; // 清空培训信息原始数据
					}
				} catch (error) {
					console.error('获取线上培训失败:', error);
				}
			},

			// 选择筛选条件
			selectFilter(filter) {
				this.selectedFilter = filter;
				// 根据选择调用不同的接口
				if (this.selectedFilter === '培训机构') {
					this.getPxjg()
				} else if (this.selectedFilter === '培训信息') {
					this.getPeixunList()
				} else if (this.selectedFilter === '线上培训') {
					this.getxspxList()
				}
			},
			// 搜索确认
			searchConfirm() {
				this.filterData()
			},
			// 综合搜索和筛选方法
			filterData() {
				if (this.selectedFilter === '培训机构') {
					let filteredData = [...this.originalPxzyData]

					// 搜索框筛选
					if (this.searchQuery.trim()) {
						const searchText = this.searchQuery.trim()
						filteredData = filteredData.filter(item => {
							const companyName = (item.companyName || '').toString()
							const qyjj = (item.qyjj || '').toString()
							const zyyw = (item.zyyw || '').toString()

							const allFields = `${companyName}${qyjj}${zyyw}`
							return allFields.indexOf(searchText) !== -1
						})
					}

					this.pxzyData = filteredData
				} else if (this.selectedFilter === '培训信息') {
					let filteredData = [...this.originalPxxxData]

					// 搜索框筛选
					if (this.searchQuery.trim()) {
						const searchText = this.searchQuery.trim()
						filteredData = filteredData.filter(item => {
							const peixunTitle = (item.peixunTitle || '').toString()
							const peixunInfo = (item.peixunInfo || '').toString()
							const peixunCompany = (item.peixunCompany || '').toString()

							const allFields = `${peixunTitle}${peixunInfo}${peixunCompany}`
							return allFields.indexOf(searchText) !== -1
						})
					}

					this.pxxxData = filteredData
				} else if (this.selectedFilter === '线上培训') {
					let filteredData = [...this.originalxxpxData]

					// 搜索框筛选
					if (this.searchQuery.trim()) {
						const searchText = this.searchQuery.trim()
						filteredData = filteredData.filter(item => {
							const company = (item.company || '').toString()
							const contact = (item.contact || '').toString()

							const allFields = `${company}${contact}`
							return allFields.indexOf(searchText) !== -1
						})
					}

					this.xspxData = filteredData
				}
			},
			// 跳转线上培训
			toggleXspx() {
				uni.navigateTo({
					url: '/pages/xspx/xspx'
				});
			}
		}
	}
</script>

<style lang="less">
	.search-bar {
		position: relative;
		background: #F5F5F5;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		margin: 0 0 20rpx 0;
		box-sizing: border-box;

		.search-input {
			width: 100%;
			height: 60rpx;
			padding-left: 60rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.search-icon {
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 32rpx;
		}
	}

	.filter-buttons1 {
		display: flex;
		flex-wrap: wrap;
		// margin-bottom: 30rpx;
		// margin-top: 30rpx;
		padding: 10rpx 30rpx;
		justify-content: space-between;
	}

	.filter-button1 {
		width: calc(33.33% - 10rpx);
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #333;
		transition: all 0.3s ease;
		text-align: center;
		margin-bottom: 16rpx;

		&:active {
			transform: scale(0.98);
		}

		&.filter-button-active {
			position: relative;
			color: #AC6C17;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 80rpx;
				width: 58rpx;
				height: 6rpx;
				margin-left: -29rpx;
				background-color: #D8A561;
			}
		}
	}

	.zwxx-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;

		image {
			width: 320rpx;
			margin-bottom: 20rpx;
		}

		view {
			color: #999;
			font-size: 28rpx;
		}
	}

	.content-bottom {
		padding-bottom: 120rpx;
	}

	.page-two-list {
		.advertising {
			margin: 30rpx 30rpx 0;
			padding: 0;
			border-radius: 12rpx;

			.ad-swiper {
				width: 100%;
				height: 300rpx;
				border-radius: 12rpx;
			}

			.ad-swiper swiper-item {
				width: 100%;
				height: 100%;
			}

			.ad-swiper swiper-item image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}

</style>